import React, { useState, useEffect } from 'react';
import type { DatingProfile } from '../types';

// Flying paper effect component
const FlyingPaper: React.FC<{ isVisible: boolean }> = ({ isVisible }) => {
  const [papers, setPapers] = useState<Array<{ id: number; x: number; y: number; rotation: number; delay: number }>>([]);

  useEffect(() => {
    if (isVisible) {
      const newPapers = Array.from({ length: 8 }, (_, i) => ({
        id: i,
        x: Math.random() * 100,
        y: Math.random() * 100,
        rotation: Math.random() * 360,
        delay: i * 100
      }));
      setPapers(newPapers);
    }
  }, [isVisible]);

  if (!isVisible) return null;

  return (
    <>
      {papers.map((paper) => (
        <div
          key={paper.id}
          style={{
            position: 'fixed',
            left: `${paper.x}%`,
            top: `${paper.y}%`,
            width: '40px',
            height: '60px',
            backgroundColor: '#fff',
            border: '1px solid #ddd',
            borderRadius: '4px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
            zIndex: 1998,
            transform: `rotate(${paper.rotation}deg)`,
            animation: `flyIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${paper.delay}ms forwards`,
            opacity: 0,
            pointerEvents: 'none'
          }}
        >
          <div style={{
            width: '100%',
            height: '4px',
            backgroundColor: '#ff4584',
            marginTop: '8px',
            borderRadius: '2px'
          }} />
          <div style={{
            width: '80%',
            height: '2px',
            backgroundColor: '#ddd',
            margin: '4px auto',
            borderRadius: '1px'
          }} />
          <div style={{
            width: '90%',
            height: '2px',
            backgroundColor: '#ddd',
            margin: '2px auto',
            borderRadius: '1px'
          }} />
          <div style={{
            width: '70%',
            height: '2px',
            backgroundColor: '#ddd',
            margin: '2px auto',
            borderRadius: '1px'
          }} />
        </div>
      ))}
    </>
  );
};

interface ProfileCardProps {
  profile: DatingProfile;
  isVisible: boolean;
  onClose: () => void;
}

export const ProfileCard: React.FC<ProfileCardProps> = ({
  profile,
  isVisible,
  onClose
}) => {
  const [animationPhase, setAnimationPhase] = useState<'entering' | 'visible' | 'exiting'>('entering');
  const [showPapers, setShowPapers] = useState(false);

  useEffect(() => {
    if (isVisible) {
      setAnimationPhase('entering');
      setShowPapers(true);
      setTimeout(() => setAnimationPhase('visible'), 100);
    } else {
      setAnimationPhase('exiting');
      setShowPapers(false);
    }
  }, [isVisible]);

  // Add keyframes for paper animation
  useEffect(() => {
    if (isVisible) {
      const style = document.createElement('style');
      style.textContent = `
        @keyframes flyIn {
          0% {
            opacity: 0;
            transform: translateY(100vh) translateX(-50px) rotate(0deg) scale(0.5);
          }
          30% {
            opacity: 1;
            transform: translateY(50vh) translateX(0px) rotate(180deg) scale(0.8);
          }
          60% {
            opacity: 0.9;
            transform: translateY(20vh) translateX(30px) rotate(270deg) scale(1);
          }
          100% {
            opacity: 0;
            transform: translateY(-20vh) translateX(-30px) rotate(360deg) scale(0.3);
          }
        }
      `;
      document.head.appendChild(style);
      return () => {
        document.head.removeChild(style);
      };
    }
  }, [isVisible]);

  if (!isVisible && animationPhase === 'exiting') return null;

  const getAnimationStyles = () => {
    const baseStyles = {
      position: 'fixed' as const,
      top: '50%',
      left: '50%',
      width: '400px',
      height: '600px',
      backgroundColor: '#fff',
      borderRadius: '15px',
      boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
      zIndex: 2000,
      transformOrigin: 'center center',
      transition: 'all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      overflow: 'hidden',
      backgroundImage: 'linear-gradient(145deg, #f9f9f9 0%, #fff 100%)',
      border: '1px solid #e0e0e0'
    };

    switch (animationPhase) {
      case 'entering':
        return {
          ...baseStyles,
          transform: 'translate(-50%, -50%) scale(0.1) rotateY(90deg) rotateZ(45deg)',
          opacity: 0
        };
      case 'visible':
        return {
          ...baseStyles,
          transform: 'translate(-50%, -50%) scale(1) rotateY(0deg) rotateZ(0deg)',
          opacity: 1
        };
      case 'exiting':
        return {
          ...baseStyles,
          transform: 'translate(-50%, -50%) scale(0.1) rotateY(-90deg) rotateZ(-45deg)',
          opacity: 0
        };
      default:
        return baseStyles;
    }
  };

  return (
    <>
      {/* Flying Papers */}
      <FlyingPaper isVisible={showPapers} />
      
      {/* Backdrop */}
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100vw',
          height: '100vh',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          zIndex: 1999,
          opacity: isVisible ? 1 : 0,
          transition: 'opacity 0.3s ease',
          backdropFilter: 'blur(5px)'
        }}
        onClick={onClose}
      />
      
      {/* Card */}
      <div style={getAnimationStyles()}>
        {/* Close Button */}
        <button
          onClick={onClose}
          style={{
            position: 'absolute',
            top: '15px',
            right: '15px',
            width: '30px',
            height: '30px',
            borderRadius: '50%',
            border: 'none',
            backgroundColor: 'rgba(255, 69, 132, 0.1)',
            color: '#ff4584',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '18px',
            fontWeight: 'bold',
            transition: 'all 0.2s ease',
            zIndex: 10
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.backgroundColor = '#ff4584';
            e.currentTarget.style.color = 'white';
            e.currentTarget.style.transform = 'scale(1.1)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.backgroundColor = 'rgba(255, 69, 132, 0.1)';
            e.currentTarget.style.color = '#ff4584';
            e.currentTarget.style.transform = 'scale(1)';
          }}
        >
          ×
        </button>

        {/* Profile Content */}
        <div style={{ padding: '30px 25px', height: '100%', overflow: 'auto' }}>
          {/* Avatar */}
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            marginBottom: '20px'
          }}>
            <div style={{
              width: '80px',
              height: '80px',
              borderRadius: '50%',
              backgroundColor: '#f0f8ff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '40px',
              border: '3px solid #ff4584',
              boxShadow: '0 5px 15px rgba(255, 69, 132, 0.3)'
            }}>
              {profile.avatar}
            </div>
          </div>

          {/* Name and Age */}
          <div style={{
            textAlign: 'center',
            marginBottom: '25px'
          }}>
            <h2 style={{
              margin: '0 0 5px 0',
              color: '#333',
              fontSize: '28px',
              fontWeight: 'bold'
            }}>
              {profile.name}
            </h2>
            <p style={{
              margin: 0,
              color: '#666',
              fontSize: '18px'
            }}>
              {profile.age}岁 • {profile.height} • {profile.location}
            </p>
          </div>

          {/* Basic Info */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{
              backgroundColor: '#fff',
              padding: '15px',
              borderRadius: '10px',
              border: '1px solid #f0f0f0',
              marginBottom: '15px'
            }}>
              <h4 style={{
                margin: '0 0 8px 0',
                color: '#ff4584',
                fontSize: '16px',
                fontWeight: 'bold'
              }}>
                职业信息
              </h4>
              <p style={{ margin: '0 0 5px 0', color: '#333' }}>
                <strong>职业：</strong>{profile.occupation}
              </p>
              <p style={{ margin: 0, color: '#333' }}>
                <strong>学历：</strong>{profile.education}
              </p>
            </div>
          </div>

          {/* Bio */}
          <div style={{ marginBottom: '20px' }}>
            <div style={{
              backgroundColor: '#fff',
              padding: '15px',
              borderRadius: '10px',
              border: '1px solid #f0f0f0'
            }}>
              <h4 style={{
                margin: '0 0 10px 0',
                color: '#ff4584',
                fontSize: '16px',
                fontWeight: 'bold'
              }}>
                个人简介
              </h4>
              <p style={{
                margin: 0,
                color: '#555',
                lineHeight: '1.6',
                fontSize: '14px'
              }}>
                {profile.bio}
              </p>
            </div>
          </div>

          {/* Hobbies */}
          <div style={{ marginBottom: '20px' }}>
            <h4 style={{
              margin: '0 0 10px 0',
              color: '#ff4584',
              fontSize: '16px',
              fontWeight: 'bold'
            }}>
              兴趣爱好
            </h4>
            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: '8px'
            }}>
              {profile.hobbies.map((hobby, index) => (
                <span
                  key={index}
                  style={{
                    backgroundColor: '#ff4584',
                    color: 'white',
                    padding: '6px 12px',
                    borderRadius: '20px',
                    fontSize: '12px',
                    fontWeight: '500'
                  }}
                >
                  {hobby}
                </span>
              ))}
            </div>
          </div>

          {/* Interests */}
          <div>
            <h4 style={{
              margin: '0 0 10px 0',
              color: '#ff4584',
              fontSize: '16px',
              fontWeight: 'bold'
            }}>
              感兴趣的话题
            </h4>
            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: '8px'
            }}>
              {profile.interests.map((interest, index) => (
                <span
                  key={index}
                  style={{
                    backgroundColor: '#f0f8ff',
                    color: '#ff4584',
                    border: '1px solid #ff4584',
                    padding: '6px 12px',
                    borderRadius: '20px',
                    fontSize: '12px',
                    fontWeight: '500'
                  }}
                >
                  {interest}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};